<template>
    <div class="organize-wrapper main">
        <nav-bar>
            <template v-slot:back>
                <back-button/>
            </template>
            <template v-slot:title>
                <h1 class="base-font-color">组织机构</h1>
            </template>
            <template v-slot:right>
                <input class="base-input base-navbar-search" type="text" placeholder="检索姓名、电话号码、单位名称"
                       v-model="searchValue"/>
                <button class="base-button" @click="normalQuery">查询</button>
                <button class="base-button" @click="focus">我的关注</button>
                <button class="base-button" @click="home">首页</button>
            </template>
        </nav-bar>

        <div class="organize-content">
            <div class="organize-category">
                <div>
                    <ul class="organize-category-list">
                        <li :class="{active: select === i}"
                            v-for="(item, i) in list1"
                            :key="item.OrgID"
                            @click="categoryClick(item, i)">
                            {{item.OrgFullName}}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="organize-sub-category">
                <div>
                    <sub-category class="sub" ref="subcategory" :list="list2"
                                  @item-click="subCategoryClick"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {navbarMixin} from '../../mixins';
    import {getOrgList} from "../../api/organize";
    import {GetALLOrgStructure} from '../../common/data-base/DataInterface';
    import SubCategory from './child-comp/SubCategory';

    export default {
        name: "Organize",
        mixins: [navbarMixin],
        components: {
            SubCategory
        },
        data() {
            return {
                searchValue: '',
                list1: [],
                list2: [],
                select: 0
            }
        },
        created() {
            if (this.$store.state.plusAlready) {
                GetALLOrgStructure().then(res => {
                    this.list1 = res;
                    console.log(JSON.stringify(this.list1));
                    if (this.list1.length > 0) {
                        this.list2 = this.list1[0].BranchOrg;
                    }
                });
            } else {
                this.list1 = getOrgList();
                this.list2 = this.list1[0].BranchOrg;
            }
        },
        methods: {
            categoryClick(item, i) {
                if (this.select !== i) {
                    this.select = i;
                    if (item.BranchOrg.length > 0) {
                        this.list2 = item.BranchOrg;
                    } else {
                        this.$router.push({path: '/searchResult', query: {orgid: item.OrgID, subTitle: item.OrgShortName, page: '3'}});
                    }
                    // this.$refs.subcategory.select = 0;
                }
            },
            subCategoryClick(item) {
                this.$router.push({path: '/searchResult', query: {orgid: item.OrgID, subTitle: item.OrgShortName, page: '3'}});
            },
            normalQuery() {
                this.$router.push({path: '/searchResult', query: {text: this.searchValue}});
            },
            focus() {
                this.$router.push({path: '/searchResult', query: {page: 1}});
            },
            home() {
                this.$router.back();
            }
        }
    };
</script>

<style scoped lang="scss">
    @import "../../assets/scss/define";

    .organize-wrapper {

        .organize-content {
            width: 100%;
            height: calc(100% - #{$navbar-height});
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url("../../assets/imgs/home/bg.png");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: top;

            > div {
                height: 100%;
                padding: 20px;

                &.organize-category {
                    flex: 1;
                }

                &.organize-sub-category {
                    flex: 2;
                }

                > div {
                    width: 100%;
                    height: 100%;
                    background-color: rgba(white, 0.2);
                    overflow: auto;

                    .sub {
                        margin-top: -2px;
                    }

                    .organize-category-list {
                        text-align: left;

                        > li {
                            display: flex;
                            align-items: center;
                            padding: 0 10px;
                            position: relative;

                            background-color: #ffffff;
                            &:nth-of-type(even) {
                                background-color: rgba(white, 0.5);
                            }

                            height: 50px;

                            &:not(:first-child) {
                                margin: 2px 0;
                            }

                            &.active {
                                color: $base-color;

                                &::before {
                                    content: '';
                                    width: 4px;
                                    height: 100%;
                                    border-left: 4px solid $base-color;
                                    position: absolute;
                                    left: 0;
                                    top: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
